<script setup>
	import { ref, onMounted } from 'vue'
	import { useUserStore } from '@/store/userInfo'
	import { useShopStore } from '@/store/shop'

	const userStore = useUserStore( )
	const shopApi = uniCloud.importObject( 'shop' )
	const shopStore = useShopStore( )
	const shop_code = ref( '' )
	// 图片值数组
	const imageValue = ref( [ ] )

	// 上传成功回调
	const success = async ( e ) => {
		try {
			uni.showLoading( {
				title: '上传中...'
			} )

			const uploadRes = await uniCloud.uploadFile( {
				filePath: e.tempFiles[0].path,
				cloudPath: `shop/code/${Date.now()}.jpg`
			} )

			shop_code.value = uploadRes.fileID
			uni.hideLoading( )

		} catch ( e ) {
			uni.hideLoading( )
			uni.showToast( {
				title: '上传失败',
				icon: 'none'
			} )
		}
	}

	// 上传失败回调
	const fail = ( e ) => {
		uni.showToast( {
			title: '上传失败',
			icon: 'none'
		} )
	}

	// 提交表单
	const submitForm = async ( ) => {
		try {
			uni.showLoading( {
				title: '保存中...'
			} )

			// 传入角色信息
			await shopApi.updateShopInfo( {
				shop_code: shop_code.value
			}, userStore.userInfo.role[ 0 ] )

			// 更新 shopStore 中的数据
			shopStore.setShopInfo( {
				code: shop_code.value
			} )

			uni.hideLoading( )
			uni.showToast( {
				title: '保存成功',
				icon: 'success'
			} )

			setTimeout( ( ) => {
				uni.navigateBack( )
			}, 1500 )
		} catch ( e ) {
			uni.hideLoading( )
			uni.showToast( {
				title: e.message || '保存失败',
				icon: 'none'
			} )
		}
	}

	// 获取店铺信息
	const getShopInfo = async ( ) => {
		try {
			uni.showLoading( {
				title: '加载中...'
			} )

			const result = await shopApi.getShopInfo( userStore.userInfo.role[ 0 ] )
			if ( result.errCode === 0 && result.data ) {
				shop_code.value = result.data.shop_code
				// 如果有二维码，初始化图片数组
				if ( result.data.shop_code ) {
					imageValue.value = [ {
						url: result.data.shop_code
					} ]
				}
			}

			uni.hideLoading( )
		} catch ( e ) {
			uni.hideLoading( )
			uni.showToast( {
				title: e.message || '获取信息失败',
				icon: 'none'
			} )
		}
	}

	onMounted( ( ) => {
		getShopInfo( )
	} )
</script>

<template>
	<view class="shop-info">
		<view class="form-container">
			<form @submit="submitForm">
				<!-- 店铺头像 -->
				<view class="avatar-section">
					<view class="label">企业客服</view>
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" :limit="1"
						:image-styles="{
							width: 160,
							height: 160,
						}" @success="success" @fail="fail" />
				</view>
				<!-- 提交按钮 -->
				<button class="submit-btn" @tap="submitForm">保存修改</button>
			</form>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.shop-info {
		min-height: 100vh;
		padding: 24rpx;
		background-color: $page-bg-color;

		.form-container {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.avatar-section {
				margin-bottom: 32rpx;

				.label {
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: $text-font-color-2;
				}
			}

			.submit-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: $brand-theme-color;
				color: #fff;
				font-size: 32rpx;
				border-radius: 44rpx;
				margin-top: 48rpx;

				&:active {
					opacity: 0.9;
				}
			}
		}
	}
</style>